<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #faebd7;
        }
    </style>
</head>

<body>
    <!-- 静态绑定：将事件名作为标签的属性名，在属性值中调用js函数 -->
    <div onclick="fn1(this)" onmouseover="fn2(this)" onmouseout="fn3(this)" onmousedown="fn4(this)">div1</div>
    <script>
        //常见事件
        // onload	    某个页面或图像被完全加载之后触发
        // onsubmit	    当表单提交时触发该事件-- - 注意事件源是表单form
        // onclick	    鼠标点击某个对象
        // ondblclick	鼠标双击某个对象
        // onblur	    元素失去焦点(输入框)
        // onfocus	    元素获得焦点(输入框)
        // onchange	    用户改变域的内容。一般使用在select标签中。
        // onkeydown	某个键盘的键被按下                 (在输入框)
        // onkeypress	某个键盘的键被按下或按住,一直按住   (在输入框)
        // onkeyup	    某个键盘的键被松开                 (在输入框)
        // onmousedown	某个鼠标按键被按下                 
        // onmouseup	某个鼠标按键被松开                 
        // onmouseover	鼠标被移到某元素之上 除了输入框
        // onmouseout	鼠标从某元素移开 除了输入框
        // onmousemove	鼠标被移动

        let fn1 = (obj) => {
            console.log(obj.innerHTML)
        }

        let fn2 = (obj) => {
            obj.style.backgroundColor = 'red'
        }

        let fn3 = (obj) => {
            obj.style.backgroundColor = "blue"
        }

        let fn4 = (obj) => {
            obj.style.backgroundColor = "yellow"
        }

        //动态绑定事件:就是根据dom技术获取某个标签对象，使用标签对象调用事件名，然后将匿名函数赋值事件名
        document.getElementsByTagName("div")[0].onmouseup = function () {
            this.style.backgroundColor = "#faebd7"
        }

    </script>
</body>

</html>